---
archived: true
title: Mmvp.js
date: 2014-02-12
description: '&micro;-MVP Library'
status: 'production'
category: web
sort_index: 1
links:
    'Source' : http://github.com/mil/Mmvp.js
footnotes:
    - '<i>Binding</i> as in specifying M-&gt;V callbacks; and not V-&gt;M callbacks. After all V-&gt;M logic is typically handled as consequent of user-interaction and thus should be specified in user-interface callbacks.'
    - 'Feel free to pop open web inspector and run on this page! <code>Mmvp</code> is in global scope.'
    - 'The <a href="https://github.com/mil/userbound.com-gulp/blob/master/src/interfaces/demos/Mmvp.js/demo/js/todo.js">demo code</a> (74 SLOC) is only slighter heavier than the <a href="https://github.com/mil/userbound.com-gulp/blob/master/src/interfaces/demos/Mmvp.js/demo/Mmvp.js">Mmvp library</a> itself (45 SLOC)'
---

[Mmvp.js](http://github.com/mil/Mmvp.js) is a micro-MVP javascript library which allows you to bind presenter callbacks to be triggered in reaction to changes in a model.

Binding<sup>1</sup> callbacks is as simple as passing a presenter callback function to `Mmvp`'s `set_action` function.  Once an action is bound, modifying the model dispatches the attached callback:

```js
var presenter = new Mmvp();
var model = {};

presenter.set_action({
    add: function(key, value) {
        console.log(
            "key '" + key + "' added with value '" + value + "'"
        );
    }
});

model.item_a = "hello";
presenter.sync(model);
// console.log: key 'item_a' added with value 'hello'</pre>
```

The above example<sup>2</sup> shows binding of the `add` action callback. In addition to the `add` callback, the following callbacks may be bound to react to model changes:

|Action     |Arguments         | Dispatched when |
|:-------   |:-----------------|:-----------------------------------------|
|`add`      | `key`, `value`   | An item is added to the model               |
|`remove`   | `key`            | An item is removed from the model           |
|`update`   | `key`, `value`   | An item's value was udpated                 |
|`populate` | `key`, `value`   | The model goes from being empty to populated |
|`empty`    |                  | The model goes from being populated to empty  |


You can imagine how you might construct more complex views by putting to use DOM selectors and a templating engine in your action callbacks.


<hr>

A MVP library explication wouldn't be complete without a TodoMVC demo. So, here's an archetypal TodoMVC demo coded up<sup>3</sup> using `Mmvp`'s presenter callbacks. :

<div class='interface-demo'>
<script type='text/javascript' src='/assets/prj_demo/mmvp.js/js/lib/zepto.js'></script>
<script type='text/javascript' src='/assets/prj_demo/mmvp.js/js/lib/shCore.js'></script>
<script type='text/javascript' src='/assets/prj_demo/mmvp.js/js/lib/shBrushJScript.js'></script>
<script type='text/javascript' src='/assets/prj_demo/mmvp.js/underscore.min.js'></script>
<script type='text/javascript' src='/assets/prj_demo/mmvp.js/Mmvp.js'></script>
<script type='text/javascript' src='/assets/prj_demo/mmvp.js/js/todo.js'></script>
<script type='text/javascript' src='/assets/prj_demo/mmvp.js/js/demo_page.js'></script>
<link rel='stylesheet' href='/assets/prj_demo/mmvp.js/css/style.css' />

<section id="demo" class='block'>
  <nav><h3 class='view active'>View</h3><h3 class='model'>Model</h3></nav>
  <section id='switcher'> 
    <section class='view active'>  
      <div id="viewpen"></div>
      <div id='newitem'>
        <span class='hint'>&raquo;</span>
        <input type='text' placeholder='Item Name'>
      </div>
    </section>
    <section class='model'><pre class='brush: js; toolbar: false;'></pre></section>
  </section>
</section>

</div>
